@import '../../../common/style/index.less';

@popup: ~'@{prefix}-popup';
@popup-position: ~'@{popup}--position';
@popup-transition: ~'@{popup}--transition';

@popup-bg-color: var(--td-popup-bg-color, @bg-color-container);
@popup-border-radius: var(--td-popup-border-radius, @radius-default);

.@{popup} {
   position: fixed;
   z-index: 11500;
   max-height: 100vh;
  
 
   &__content {
     position: relative;
     z-index: 1;
	 background-color: @popup-bg-color;
	 box-sizing: border-box;
   }
 
   &__close {
     position: absolute;
     top: 0;
     right: 0;
     padding: 20rpx;
     line-height: 1;
   }
 
   &--top {
     top: 0;
     left: 0;
   
	 .@{popup}__content{
		 width: 100vw;
		 min-height: 100rpx;
		 border-bottom-left-radius: @popup-border-radius;
		 border-bottom-right-radius: @popup-border-radius;
	 }
   }
 
   &--bottom {
     bottom: 0;
     left: 0;
	 .@{popup}__content{
		width: 100vw;
		 min-height: 100rpx;
		border-top-left-radius: @popup-border-radius;
		border-top-right-radius: @popup-border-radius;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	 }
    
   }
 
   &--left {
     top: 0;
     left: 0;
    
   }
 
   &--right {
     top: 0;
     right: 0;
   }
   &--left, &--right {
		.@{popup}__content{
			 height: 100vh;
			 min-width: 200rpx;
		}
	}
 
   &--center {
     top: 50%;
     left: 50%;
	 transform: translate3d(-50%,-50%,0);
	 .@{popup}__content{
	 	 border-radius: @popup-border-radius;
	 }
   }
 
   &.@{prefix}-dialog-enter,
   &.@{prefix}-dialog-leave-to {
     &.@{popup}--center {
       transform: scale(.6) translate3d(-50%, -50%, 0);
       opacity: 0;
     }
   }
 
   &-overflow-hidden {
     overflow: hidden;
   }
}
